<!--
 * @Date: 2022-05-09 15:26:30
 * @Author: 陶子
 * @LastEditTime: 2023-06-06 19:32:33
 * @FilePath: \jk_one-stop_pc\src\views\baseManagement\maintain\myRepair\maintenanceReport.vue
 * @pageName: 这是--(维修汇报)--页面
-->
<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['设备管理','设备维修','维修任务']" currentMenu="维修汇报">
    </crumbs>
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="wrapLeft">
          <div class="detail-item">
            <p class="subtitle">报修编号</p>
            <p class="secondary-text">{{detailInfo.repairCode || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">故障设备</p>
            <p class="secondary-text">{{detailInfo.deviceName || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">设备类别</p>
            <p class="secondary-text">{{detailInfo.deviceCategoryText || '-' }}</p>
          </div>
        </div>
        <div class="wrapRight">
          <div class="detail-item">
            <p class="subtitle"></p>
            <p class="secondary-text"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="form-body">
      <a-card title="维修信息" :bordered="false" style="margin-top: 12px">
        <a-form-model ref="ruleFormTwo" :model="buildForm" :rules="rules">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="故障类别" style='width:100%'>
                <a-select placeholder="请选择" v-model="buildForm.faultCategory">
                  <a-select-option v-for="item in categoryList" :key="item.value" :value="item.value">
                    {{item.text}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="15">
              <a-form-model-item label="故障原因">
                <a-textarea placeholder="请输入" :max-length="500" v-model="buildForm.faultReason" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="15">
              <a-form-model-item label="维修描述" prop='repairDescription'>
                <a-textarea placeholder="请输入" :max-length="500" v-model="buildForm.repairDescription" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-form-model-item label="附件" style="flex: 1">
              <file-upload :ids="attachment" @getFileList="getFileList"></file-upload>
              <p style="line-height: 30px;color:#8d8d8d;">最多上传5个文件，大小不可超过20M</p>
            </a-form-model-item>
          </a-row>
        </a-form-model>
      </a-card>
    </div>
    <div class="footer-submit form-footer">
      <a-button @click="submitForm" type="primary" :loading='subLoading' class="submitBtn"> 提交 </a-button>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import { reportNewRepairInfo, repairReport } from '@/api/productOrder'
import FileUpload from '@/components/fileActions/FileUpload.vue'
import { ajaxGetDictItems } from '@/api/api'
export default {
  data() {
    return {
      jkeForm: {
        title: '维修汇报',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      detailInfo: {
        repairCode: '',
        deviceName: '',
        deviceCategoryText: '',
      },
      // 工艺路线配置列
      subLoading: false,
      buildForm: {
        repairId: '',
        faultCategory: undefined,
        faultReason: '',
        repairDescription: '',
      },
      rules: {
        repairDescription: [{ required: true, message: '请输入维修描述', trigger: 'blur' }],
      },
      categoryList: [],
      //分割线
      attachment: '', //附件
      loginUser: {},
    }
  },
  components: {
    crumbs,
    FileUpload,
  },
  methods: {
    getDictCode() {
      ajaxGetDictItems('mess_fault_category', null).then((res) => {
        if (res.success) {
          this.categoryList = res.result
        }
      })
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initForm(query) {
      this.jkeForm.visible = true
      this.buildForm.repairId = query.repairId
      this.detailInfo.repairCode = query.repairCode
      this.detailInfo.deviceName = query.deviceName
      this.detailInfo.deviceCategoryText = query.deviceCategoryText
      this.loginUser = JSON.parse(localStorage.getItem('pro__Login_Userinfo'))
      this.getDictCode()
      this.getDetail()
    },
    getDetail() {
      let obj = {
        repairId: this.buildForm.repairId,
        assignedRepairPersonnel: this.loginUser.value.id,
      }
      reportNewRepairInfo(obj).then((res) => {
        if (res.success) {
          if (res.result) {
            this.buildForm.faultCategory = res.result.faultCategory ? res.result.faultCategory : undefined
            this.buildForm.faultReason = res.result.faultReason
            this.buildForm.repairDescription = res.result.repairDescription
            this.attachment = res.result.attachment
            this.$forceUpdate()
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    /* 获取附件 */
    getFileList(v) {
      this.attachment = v
      console.log('上传的附件id：', v)
    },
    // 提交（必须使用名为submitProcess方法进行提交）

    // 提交
    submitForm() {
      this.$refs.ruleFormTwo.validate((valid) => {
        if (valid) {
          console.log('操作报工验证通过')
          this.handleSubmit()
        } else {
          return false
        }
      })
    },
    handleSubmit() {
      this.subLoading = true
      let params = {
        ...this.buildForm,
        attachment: this.attachment,
      }
      repairReport(params).then((res) => {
        if (res.success) {
          this.$antdMessage.success('维修汇报成功')
          this.$emit('refresh')
          this.goBack()
        } else {
          this.$antdMessage.warning(res.message)
        }
        this.subLoading = false
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  .wrapLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .detail-item {
      flex: 1;
    }
  }
  .wrapRight {
    width: 116px;
    .detail-item {
      .subtitle {
        text-align: right;
      }
      .secondary-text {
        text-align: right;
      }
    }
  }
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}

.uni-card {
  padding: 24px 40px;
  // margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px 0 24px -40px;
}
/deep/.ant-form-vertical {
  display: flex;
  justify-content: space-between;
  .ant-form-item {
    width: 30%;
  }
}
.form-body {
  height: calc(100vh - 55px);
  // overflow-y: scroll;
}
.submitBtn {
  .flex(flex-end, center);
  padding: 8px;
}
</style>
